<template>
  <div class="CombinerMonitorbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="littlexunhuan" ref="littlexunhuanss">
        <div v-if="!tableData.length" class="empty"><el-empty description="暂无数据" ></el-empty></div>
        <div class="littlebox" v-for="(item,index) in tableData" :key="index" style="padding: 20px !important;">
          <div class="intop">
            <div class="onebox">
              <div><img src="../../../../assets/Photovoltaic/huiliuxiang.png" alt=""> </div>
            </div>
            <div class="forbox">
              <div>型号</div>
              <div>路数</div>
              <div>总电流</div>
            </div>
            <div class="twobox">
              <div>{{item.model}}</div>
              <div>{{item.count}}</div>
              <div>{{item.totalCurrent?.toFixed(2)}}</div>
            </div>
            <div class="twreebox">
              <div></div>
              <div></div>
              <div>A</div>
            </div>
          </div>
          <div class="namebox muxian">
            <div class="onebox overfol">{{item.name}}</div>
            <div class="forbox">母线电压</div>
            <div class="twobox">{{item.busVoltage?.toFixed(2)}}</div>
            <div class="twreebox">V</div>
          </div>
          <div class="iconfontbox">
            <div>
              <i v-if="item.status=='2'" style="color: red;" class="iconfont icon-lixian11"></i>
              <i v-else-if="item.status=='3'" style="color: #f2bd42;font-size: 18px;" class="iconfont icon-gaojing"></i>
              <i v-else style="color: #1afa29;" class="iconfont icon-zhengchang"></i>
              <span>{{item.status=='1'?'在线':item.status=='2'?'离线':'告警'}}</span>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="littlexunhuan">
        <el-table
            :data="tableData"
            size="medium"
            border
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 1px)"
            style="width: 100%">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              label="状态"
              align="center">
              <template #default="{row}">
                <span>
                  <i v-if="row.status=='2'" style="color: red;" class="iconfont icon-lixian11"></i>
                  <i v-else-if="row.status=='3'" style="color: #f2bd42;font-size: 18px;" class="iconfont icon-gaojing"></i>
                  <i v-else style="color: #1afa29;" class="iconfont icon-zhengchang"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="汇流箱名称">
            </el-table-column>
            <el-table-column
              prop="model"
              label="型号">
            </el-table-column>
            <el-table-column
              prop="count"
              label="路数">
            </el-table-column>
            <el-table-column
              prop="busVoltage"
              label="母线电压(V)">
            </el-table-column>
            <el-table-column
              prop="totalCurrent"
              label="总电流(A)">
            </el-table-column>
            <el-table-column label="支路电流(A)">
              <el-table-column
                v-for="(item,index) in totalCount"
                align="right"
                :key="index"
                :prop="'zhilu'+(index+1)"
                :label="'支路'+(index+1)">
              </el-table-column>
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {gethuiliuxianglistapi} from '@/api/Photovoltaic/monitor/CombinerMonitor'
import NocheckTree from '../component/NocheckTree.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    NocheckTree
  },
  data() {
    return {
      loading:false,
      tableData:[],
      totalCount:''
    };
  },

  mounted() {
    
  },

  methods: {
    // 树节点点击
    async handleNodeClicks(val) {
      // if (val.className == 'EnergyStorageSystem' || val.className == 'EpowerSystem') {
        this.loading = true;
        const loading = this.$loading({
          lock: true,
          text: 'loading',
          spinner: 'el-icon-loading',
          target: this.$refs.littlexunhuanss
        });
        console.log(val);
        const { data: { list, totalCount } } = await gethuiliuxianglistapi({ classId: val.id })
        list.forEach(ele => {
          ele.currentList.map((item,index) => {
            ele['zhilu'+(index+1)]=item
          })
        })
        this.tableData = list
        this.totalCount = totalCount
        loading.close()
        this.loading = false
      // } else {
      //   this.tableData = []
      //   this.totalCount='1'
      // }
    },
  },
};
</script>

<style scoped>
.CombinerMonitorbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    height: 100%;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox{
    width: calc(100% - 310px);
    background-color: #fff;
    height: 100%;
    padding: 20px;
    .littlexunhuan{
      height: 47.5%;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      .empty{
        margin:0 auto;
      }
      .littlebox{
        height: 160px;
        width: calc(25% - 10px);
        margin: 5px;
        border: 1px solid skyblue;
        border-radius: 5px;
        padding: 20px;
         .intop, .namebox{
          display: flex;
          .onebox{
            width: 35%;
          }
          .forbox{
            width: 25%;
            font-size: 14px;
            div{
              height: 33.33%;
              margin-bottom: 3px;
            }
          }
          .twobox{
            width: 30%;
            /* font-style: italic; */
            div{
              margin-bottom: 3px;
              height: 33.33%;
            }
          }
          .twreebox{
            width: 10%;
            font-size: 14px;
            div{
              margin-bottom: 3px;
              height: 33.33%;
            }
          }
        }
        .muxian{
          margin: 8px 0;
          .overfol{
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
        }
        .iconfontbox{
          display: flex;
          font-size: 14px;
          justify-content: center;
          .iconfont{
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>